<template>
  <a-modal :visible="visible" :title="$t('other.reworkAndReturnToWarehouse')" @ok="handleOk" @cancel="handleCancel"  :width="400">
    <a-spin :spinning="loading">
      <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          ref="formRef"
      >
        <a-form-item :label="$t('other.reworkType')" name="reworkType" :rules="[{ required: true, message: $t('common.pleaseSelect') }]">
          <a-row >
            <a-col :span="24">
              <a-select v-model:value="formState.reworkType" :placeholder="$t('other.reworkType')" style="width: 200px" :options="optionsType"></a-select>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item :label="$t('other.reworkProcess')" name="processId" :rules="[{ required: true, message: $t('common.pleaseSelect') }]">
        <a-row >
            <a-col :span="24">
              <a-select v-model:value="formState.processId" show-search :placeholder="$t('other.reworkProcess')" style="width: 200px" :filter-option="filterOption">
                <a-select-option :value="item.id" v-for="(item,key) in roadTableData" :key="key" :title="item.name "  >{{ item.name  }}</a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup >
import {ref} from "vue"
import { cloneDeep } from "lodash"
import axios from "@/utils/request"
import { message } from 'ant-design-vue'
import i18n from '@/locales/index'

const { t } = i18n.global
const emits = defineEmits(['ok'])
const visible = ref(false)
const loading = ref(false)
const formRef = ref()
let roadTableData = ref([])

const optionsType = ref([
  {label:t('other.generalRework'),value:'1'},
  {label:t('other.reworkSpecifiedProcess'),value:'2'},
  {label:t('hangManage.moreReturn'),value:'3'}
])
const formState = ref({})
const filterOption = (inputTxt,optionObj) => {
  return optionObj.value.toLowerCase().indexOf(inputTxt.toLowerCase()) >= 0;
};
const open = async (record) => {
  console.log(record)
  visible.value = true
  loading.value = true
  await getRoadmapProcList(record.roadMapId)
  formRef.value.resetFields()
  formState.value.scheduleBillId = record.id
}


const getRoadmapProcList = async (id) => {
  try {
    const res = await axios.getAction('/api/mo/mo-proc-roadmap/get', { id })
    roadTableData.value = res.success ? res.data.moProcRoadmapProcList : []
    loading.value = false
  }catch (e) {
    loading.value = false
    console.log(e)
  }
}
const handleOk = async () => {
  try {
    await formRef.value.validateFields()
    let object = queryParams(formState.value)
    console.log(object)
     let res = await axios.postAction('/api/hanger/schedule-bill/rework-return-to-depot',object)
      if (res.success){
        message.success('操作成功')
        visible.value = false
        emits('operateData')
      }else{
        visible.value = false
        message.warning('操作失败')
      }
  }catch (e) {
    visible.value = false
    console.log(e)
  }
}
const queryParams = (value) => {
  const params = cloneDeep(value)
  return params
}

const handleCancel = () => {
  visible.value = false
  loading.value = false
  console.log( visible.value)
  console.log( loading.value)
}
defineExpose({
  open
})
</script>
